<template>
  <view class="service-detail">
    <view v-if="list" class="service-list">
      <view class="avatar">
        <image :src="list.imgUrl" mode="aspectFill" />
      </view>
      <view class="info">
        <text class="name">{{ list.name }}</text>
        <view class="details">
          <text class="label">服务类型：</text>
          <text class="value">{{ list.serviceType }}</text>
        </view>
        <view class="details">
          <text class="label">服务内容：</text>
          <text class="value">{{ list.serviceContent }}</text>
        </view>
        <view class="details">
          <text class="label">服务收费：</text>
          <text class="value">￥{{ list.serviceFee }}</text>
        </view>
        <view class="details">
          <text class="label">好评率：</text>
          <text class="value">{{ list.rating }}</text>
        </view>
      </view>
    </view>
    <view v-else class="no-data">
      <text>未找到服务人员信息</text>
    </view>
  </view>
  <nut-tabbar bottom safe-area-inset-bottom placeholder class="flex">
    <nut-button shape="square" type="warning" class="flex-1" @click="chat(list?.id)">立即沟通 </nut-button>
    <nut-button shape="square" type="primary" class="flex-1" @click="booking(list?.id, list?.serviceType)"
      >立即预约
    </nut-button>
  </nut-tabbar>
</template>

<script setup>
import { ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { getServicePersonById } from "@/api/service";
import { creatroom } from "@/api/customer";

const list = ref(null);
const userId = uni.getStorageSync("userId");

onLoad(async (options) => {
  try {
    if (options.data) {
      const decodedData = decodeURIComponent(options.data);
      list.value = JSON.parse(decodedData);
    } else if (options.id) {
      list.value = await getServicePersonById(options.id);
    } else {
      console.error("未接收到参数");
    }
  } catch (error) {
    uni.showToast({
      title: "加载数据失败",
      icon: "none",
    });
  }
});

const booking = (id, type) => {
  if (!id || !type) {
    uni.showToast({
      title: "参数错误",
      icon: "none",
    });
    return;
  }
  uni.navigateTo({
    url: `/pages/modules/user/release/index?servicePersonId=${id}&type=${type}`,
  });
};

const chat = async (id) => {
  if (!id) {
    uni.showToast({
      title: "参数错误",
      icon: "none",
    });
    return;
  }

  try {
    const data = {
      customerId: userId,
      servicePersonId: id,
    };

    const res = await creatroom(data);
    const chatData = {
      contact_id: id,
      conversation_id: res.data,
      service_person_name: list.value?.name || "未知用户",
      avatar: list.value?.imgUrl || "",
    };

    uni.navigateTo({
      url: `/pages/chat/index?item=${encodeURIComponent(JSON.stringify(chatData))}`,
    });
  } catch (error) {
    console.error("创建聊天室失败:", error);
    uni.showToast({
      title: "创建聊天室失败",
      icon: "none",
    });
  }
};
</script>

<style scoped lang="scss">
.service-detail {
  padding: 20px;

  .service-list {
    display: flex;
    flex-direction: column;
    gap: 20px;

    .avatar {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      overflow: hidden;
      margin: 0 auto;

      image {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    .info {
      .name {
        font-size: 18px;
        font-weight: bold;
        margin-bottom: 15px;
        display: block;
      }

      .details {
        margin-bottom: 10px;
        display: flex;
        align-items: center;

        .label {
          font-size: 14px;
          color: #666;
          min-width: 70px;
        }

        .value {
          font-size: 14px;
          color: #333;
        }
      }
    }
  }

  .no-data {
    text-align: center;
    padding: 40px 0;
    color: #999;
  }
}

.flex {
  display: flex;
}

.flex-1 {
  flex: 1;
}
</style>
